<template>
  <div class="family">
    <headerPhoto class="family-header">
      <div class="content d-flex justify-content-center align-items-center">
        <div class="img">
          <img src="../static/imgs/images/myUser.jpg" alt="">
        </div>
        <div class="love"></div>
        <div class="img">
          <img src="../static/imgs/images/sheUser.jpg" alt="">
        </div>
      </div>
    </headerPhoto>
    <waveView></waveView>

    <div class="mycontent">
      <div class="container  pt-5">
        <div class="main1 text-center">
          <div class="text">
            这 是 我 们 一 起 走 过 的
          </div>
          <div class="love-time-title">
            第 <span class="love-time">{{ loveTime.year }}</span> 年 <span class="love-time">{{ loveTime.month }}</span> 月
            <span class="love-time">{{ loveTime.day }}</span> 日
            <span class="love-time">{{ loveTime.hour }}</span> 时 <span class="love-time">{{ loveTime.minute }}</span> 分
            <span class="love-time">{{ loveTime.second }}</span> 秒
          </div>
          <!-- <div class="year-time-title">
          春节倒计时: <span class="year-time">{{ springTime.day }}</span> 天
          <span class="year-time">{{ springTime.hour }}</span> 时
          <span class="year-time">{{ springTime.minute }}</span> 分
          <span class="year-time">{{ springTime.second }}</span> 秒
        </div> -->
        </div>

        <div class="main2">
          <div class="box" @click="isOpenFn(0)">
            <div class="img">
              <img src="../static/imgs/images/note2.webp" alt="">
            </div>
            <div class="photo">时光相册</div>
          </div>
          <div class="box" @click="isOpenFn(1)">
            <div class="img">
              <img src="../static/imgs/images/note3.png" alt="">
            </div>
            <div class="photo">祝福板</div>
          </div>
        </div>
        <div class="main3">
          <div :class="['row', num == 0 ? '' : 'active']">
            <div class="col-lg-4 col-md-6 col-sm-12" v-for="(item) in photoList" :key="item.id">
              <div class="list-item mt-2">
                <div class="img">
                  <img :src="item.photo_url" :alt="item.photo_title">
                </div>
                <div class="title">{{ item.photo_title }}</div>
                <div class="time">date: {{ item.createAt }}</div>
              </div>
            </div>
          </div>
          <div :class="['blessing', num == 1 ? '' : 'active']">
            <commentView :hasMoreData @publish="publishData" @more="more" :wishArr="wishArr"></commentView>
          </div>
        </div>
      </div>
    </div>


  </div>
</template>

<script setup lang="ts">
import headerPhoto from '@/component/headerPhoto.vue';
import waveView from '@/component/waveView.vue';
import commentView from '@/component/commentView.vue';
import { onMounted, onUnmounted, ref } from 'vue';
import { useCounterStore } from '@/stores/counter'
import { publishWish, getWishList, host, imgUrl, getPictureList } from "@/api/index"
import { ElMessage } from 'element-plus'
const counter = useCounterStore()

const num = ref<number>(0);
// 控制tab显示隐藏
const isOpenFn = (value: number) => {
  num.value = value;
}

interface LoveTimeTiem {
  year: number;
  month: number;
  day: number;
  hour: number;
  minute: number | string;
  second: number | string;
}


interface Wish {
  id: number;
  user_id: number;
  createAt: string;
  username: string;
  wish_text: string;
  imgUrl: string;
  total: number;
}

interface publishItem {
  imgUrl: string;
  user_id: number;
  wish_text: string;
  username: string;
}
// 接收子组件传递的数据
const publishData = async (data: publishItem) => {
  // console.log('子组件传递的数据', data)
  await publishWishFn(data)
}


const page_num = ref<number>(1);
const page_size = ref<number>(10);
const wishArr = ref<Wish[]>([])

interface IMore {
  page_size: number
}

// 加载更多
const hasMoreData = ref<boolean>(true)
const more = async (data: IMore) => {
  if (hasMoreData.value == false) {
    ElMessage({
      showClose: true,
      message: '没有更多数据了~~',
      type: 'warning',
      offset: 100,
      plain: true,
    })
    return
  }
  page_size.value += data.page_size
  // console.log(data)

  await getWishListFn()
}

const photoNum = ref<number>(1);
const photoSize = ref<number>(10);


interface Photo {
  id: number;
  photo_url: string;
  photo_title: string;
  createAt: string;
}


const photoList = ref<Photo[]>([])

// 获取相册列表
const getPictureListFn = async () => {

  await getPictureList({ page_num: photoNum.value, page_size: photoSize.value }).then(
    res => {
      if (res.data.code == 200) {
        photoList.value = res.data.result.map((item: Photo) => {
          item.photo_url = host + item.photo_url
          item.createAt = new Date(item.createAt).toLocaleString()
          return item
        })
      }
      // console.log('相册列表数据', res.data)
    }, err => {
      console.log(err)
    }
  )
}
getPictureListFn()
// 获取祝福列表
const getWishListFn = async () => {
  await getWishList({ page_num: page_num.value, page_size: page_size.value })
    .then(
      res => {
        if (res.data.code == 200) {
          if (res.data.result.length < page_size.value) {
            hasMoreData.value = false
          }
          // console.log(res.data)
          wishArr.value = res.data.result.map((item: Wish) => {
            return {
              id: item.id,
              user_id: item.user_id,
              username: item.username,
              wish_text: item.wish_text,
              imgUrl: imgUrl(item.imgUrl),
              total: res.data.total,
              createAt: new Date(item.createAt).toLocaleString()
            }
          });
          // console.log(wishArr.value)
        }

      },
      err => {
        console.log(err)
      }
    )
}
getWishListFn()

// 发布祝福
const publishWishFn = async (data: publishItem) => {
  const token = localStorage.getItem('TTOO');
  if (token) {
    const userStatus = await counter.loginedStatusFn(token)
    // console.log(userStatus)
    if (userStatus) {
      if (data.wish_text.trim() == '') {
        ElMessage({
          showClose: true,
          message: '你还没写呢~~',
          type: 'warning',
          offset: 100,
          plain: true,
        })
        return false
      }
      await publishWish(data)
        .then(
          res => {
            // console.log(res.data)
            if (res.data.code === 200) {
              ElMessage({
                showClose: true,
                message: '发表成功~~',
                type: 'success',
                offset: 100,
                plain: true,
              })
              getWishListFn()
            } else {
              ElMessage({
                showClose: true,
                message: res.data.msg,
                type: 'error',
                offset: 100,
                plain: true,
              })
            }
          },
          err => {
            console.log(err)
          }
        )
    } else {
      ElMessage({
        showClose: true,
        message: '登录已过期~~',
        type: 'error',
        offset: 100,
        plain: true,
      })
      return false
    }
  } else {
    ElMessage({
      showClose: true,
      message: '请先登录~~',
      type: 'error',
      offset: 100,
      plain: true,
    })
    return false
  }
}


const loveTime = ref<LoveTimeTiem>({
  year: 0,
  month: 0,
  day: 0,
  hour: 0,
  minute: 0,
  second: 0
});

// interface CountdownTime {
//   day: number;
//   hour: number;
//   minute: number;
//   second: number;
// }
// const springTime = ref<CountdownTime>({
//   day: 0,
//   hour: 0,
//   minute: 0,
//   second: 0
// });

const time = ref<string>('2024-01-25 21:00:00');
// 在一起时间戳
const oldTime = new Date(time.value).getTime();

// 获取下一个春节的时间戳
// const getNextSpringFestival = (): number => {
//   const now = new Date();
//   const year = now.getFullYear();
//   // 假设2024年春节是2024年2月10日，实际项目中可以从接口获取
//   let springFestival = new Date(`${year}-02-10 00:00:00`).getTime();

//   // 如果今年的春节已经过了，则计算明年的春节
//   if (now.getTime() > springFestival) {
//     springFestival = new Date(`${year + 1}-02-10 00:00:00`).getTime();
//   }

//   return springFestival;
// };

onMounted(() => {
  const updateLoveTime = () => {
    const nowTime = new Date().getTime();
    const timeDiff = (nowTime - oldTime) / 1000;
    loveTime.value.year = Math.floor(timeDiff / (365 * 24 * 60 * 60));
    const remainSeconds = timeDiff % (365 * 24 * 60 * 60);
    loveTime.value.month = Math.floor(remainSeconds / (30 * 24 * 60 * 60));
    const remainSeconds2 = remainSeconds % (30 * 24 * 60 * 60);
    loveTime.value.day = Math.floor(remainSeconds2 / (24 * 60 * 60));
    const remainSeconds3 = remainSeconds2 % (24 * 60 * 60);
    loveTime.value.hour = Math.floor(remainSeconds3 / (60 * 60));
    const remainSeconds4 = remainSeconds3 % (60 * 60);
    const minute = Math.floor(remainSeconds4 / 60)
    if (minute < 10) {
      loveTime.value.minute = '0' + minute;
    } else {
      loveTime.value.minute = minute;
    }
    const remainSeconds5 = Math.floor(remainSeconds4 % 60);
    if (remainSeconds5 < 10) {
      loveTime.value.second = '0' + remainSeconds5;
    } else {
      loveTime.value.second = remainSeconds5;
    }

    // 计算春节倒计时
    // const springFestivalTime = getNextSpringFestival();
    // const diff = (springFestivalTime - nowTime) / 1000;

    // if (diff > 0) {
    //   springTime.value.day = Math.floor(diff / (24 * 60 * 60));
    //   const hours = Math.floor((diff % (24 * 60 * 60)) / (60 * 60));
    //   springTime.value.hour = hours;
    //   const minutes = Math.floor((diff % (60 * 60)) / 60);
    //   springTime.value.minute = minutes;
    //   const seconds = Math.floor(diff % 60);
    //   springTime.value.second = seconds;
    // } else {
    //   // 春节已过，重置为0
    //   springTime.value.day = 0;
    //   springTime.value.hour = 0;
    //   springTime.value.minute = 0;
    //   springTime.value.second = 0;
    // }
  };

  updateLoveTime();
  const timer = setInterval(updateLoveTime, 1000);

  // 组件卸载时清除定时器
  onUnmounted(() => {
    if (timer) clearInterval(timer);
  });
});
</script>

<style lang="less" scoped>
.family {
  width: 100%;
  padding-bottom: 50px;

  .family-header {
    .content {
      .img {

        flex-shrink: 0;
        width: 130px;

        img {
          box-shadow: 0 0 15px rgba(0, 0, 0, .7);
          width: 100%;
          border-radius: 50%;
        }
      }

      .love {
        margin: 0 120px;
        flex-shrink: 0;
        width: 50px;
        height: 50px;
        background-color: rgb(252, 49, 49);
        // 添加爱心形状和动画
        position: relative;
        transform-origin: center;
        animation: heartbeat 2.7s ease-in-out infinite;
        transform: rotate(45deg);

        &::before,
        &::after {
          content: "";
          position: absolute;
          width: 50px;
          height: 50px;
          background-color: rgb(252, 49, 49);
          border-radius: 50%;
        }

        &::before {
          top: -25px;
          left: 0;
        }

        &::after {
          top: 0;
          left: -25px;
        }
      }
    }
  }

  .mycontent {
    width: 100%;


    background: linear-gradient(90deg, rgba(60, 10, 30, .05) 5%, #fff 0),
      linear-gradient(1turn, rgba(60, 10, 30, .05) 5%, #fff 0);
    background-size: 30px 30px;
  }

  .main1 {

    .text {
      width: 100%;
      font-size: 35px;
      background-image: linear-gradient(270deg, #ff4500, orange, gold, #90ee90, #0ff, #1e90ff, #9370db, #ff69b4, #ff4500);
      background-size: 2550rem;
      /* 设置足够大的背景尺寸 */
      -webkit-background-clip: text;
      /* 裁剪背景为文字形状 */
      -webkit-text-fill-color: transparent;
      /* 将文字颜色设为透明以显示背景 */
      animation: color 10s ease infinite;
      padding-bottom: 20px;
    }

    .love-time-title {
      width: 100%;
      // padding: 10px 0;
      font-size: 30px;

      .love-time {
        font-size: 60px;
      }
    }

    .year-time-title {
      width: 100%;
      padding: 10px 0;
      font-size: 25px;

      .year-time {
        font-size: 35px;
      }
    }

  }

  .main2 {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 20px;

    .box {
      width: 20%;
      height: 100%;
      background-color: #f0f0f0;
      border-radius: 5px;
      text-align: center;
      padding-top: 10px;
      // margin-right: 10px;

      .img {
        width: 60px;
        height: 60px;
        margin: 0 auto;

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

    }
  }

  .main3 {
    width: 100%;
    margin-top: 20px;


    .list-item {
      width: 100%;
      height: 450px;
      background-color: #fff;
      box-shadow: 0 0 5px rgba(0, 0, 0, .6);
      border-radius: 10px;
      padding: 10px;
      margin-bottom: 20px;

      .img {
        width: 100%;
        height: 85%;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid rgba(0, 0, 0, .2);

        img {
          width: 100%;
          height: 100%;
        }
      }

      .title {
        width: 100%;
        padding-left: 10px;
        margin-top: 10px;
      }

      .time {
        margin-top: 5px;
        padding-left: 10px;
        width: 100%;
        color: #ccc;
        font-size: 14px;
      }
    }
  }

  .row,
  .blessing {
    transition: opacity 1s ease-in-out;
    opacity: 1;
    transform: translateY(0);
    max-height: 10000px;
    /* 设置一个足够大的最大高度 */
    overflow: hidden;

    &.active {
      opacity: 0;
      transform: translateY(-20px);
      max-height: 0;
      padding: 0;
      margin: 0;
    }
  }

  .blessing {
    width: 100%;
    padding: 0 150px;
  }

  @media (max-width: 992px) {
    .blessing {
      padding: 0 70px;
    }
  }

  @media (max-width: 768px) {
    .blessing {
      padding: 0 40px;
    }
  }

  @media (max-width: 400px) {
    .blessing {
      padding: 0 10px;
    }
  }

}

@keyframes color {
  100% {
    background-position: -2000rem;
  }
}

// 心跳动画关键帧
@keyframes heartbeat {
  0% {
    transform: rotate(45deg) scale(.6);
  }

  50% {
    transform: rotate(45deg) scale(1.2);
  }

  100% {
    transform: rotate(45deg) scale(.6);
  }
}

@media (max-width: 768px) {
  .family {
    .family-header {
      .content {
        .img {
          width: 120px;
        }

        .love {
          margin: 0 80px;
        }
      }
    }

    .main1 {
      .text {
        font-size: 25px;
        background-size: 1000rem;
      }

      .love-time-title {
        font-size: 20px;

        .love-time {
          font-size: 35px;
        }
      }

      .year-time-title {
        font-size: 20px;

        .year-time {
          font-size: 35px;
        }
      }

    }

  }
}

@media (max-width: 576px) {
  .family {
    .family-header {
      .content {
        .img {
          width: 120px;
        }

        .love {
          margin: 0 50px;
        }
      }
    }
  }
}

@media (max-width: 376px) {
  .family {
    .family-header {
      .content {
        .img {
          width: 100px;
        }

        .love {
          margin: 0 30px;
        }
      }
    }

    .main1 {
      .text {
        font-size: 25px;
        background-size: 1000rem;
      }

      .love-time-title {
        font-size: 18px;

        .love-time {
          font-size: 23px;
        }
      }

      .year-time-title {
        font-size: 15px;

        .year-time {
          font-size: 25px;
        }
      }

    }

  }
}
</style>
